<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title></title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
    <link rel="stylesheet" href="/X-admin/css/font.css">
    <link rel="stylesheet" href="/css/xadmin.css">
    <script src="/lib/layui/layui.js" charset="utf-8"></script>
    <script src="/css/js/echarts.min.js" charset="utf-8"></script>
    <script type="text/javascript" src="/js/xadmin.js"></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts-all-3.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header" >
                    <button type="button" class="layui-btn layui-btn-sm layui-btn-radius layui-btn-normal "  onclick="select() " style="float:right">
                        <i class="layui-icon">&#xe666;</i>
                    </button>
                </div>
                <div class="layui-card-body "><!--日期选项卡占位-->
                    <input class="layui-input" placeholder="日期" name="date" id="date"></div>
                </div>
            </div>
        </div>
    </div>

    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header" >数据统计
                </div>
                <div class="layui-card-body ">
                    <ul class="layui-row layui-col-space10 layui-this x-admin-carousel x-admin-backlog">
                        <li class="layui-col-md2 layui-col-xs6">
                            <a href="javascript:;" class="x-admin-backlog-body">
                                <h3>出完刀人数</h3>
                                <p>
                                    <cite id="outsum" th:text="${allKnifecount}"></cite></p>
                            </a>
                        </li>
                        <li class="layui-col-md2 layui-col-xs6">
                            <a href="javascript:;" class="x-admin-backlog-body">
                                <h3>总伤害</h3>
                                <p>
                                    <cite id="hurtsum" th:text="${hurtSum}==0?'--':${hurtSum}"></cite></p>
                            </a>
                        </li>
                        <li class="layui-col-md2 layui-col-xs6">
                            <a href="javascript:;" class="x-admin-backlog-body">
                                <h3>共击败王数</h3>
                                <p>
                                    <cite id="kingsum" th:text="${kingcount}==-5000?${kingcount}:'--'"></cite></p>
                            </a>
                        </li>

                    </ul>
                </div>
            </div>
        </div>
    </div>

    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header" >伤害柱状图
                </div>
                <div class="layui-card-body " id="zhu" style=" height:500px;">
                <div  style="width: 600px;height:400px;"></div>

                </div>
            </div>
        </div>
    </div>

</div>

<script type="text/javascript">

    var myChart = echarts.init(document.getElementById("zhu"));
    // 初始化report对象
    myChart.setOption({
        title: {
            text: '伤害统计撒'
        },
        tooltip: {},
        legend: {
            fileNames:['总伤害']
        },
        xAxis: {
            fileNames: []
        },
        yAxis: {},
        series: [{
            name: '总伤害',
            type: 'bar',
            fileNames: []
        }]
    });

    //刷新
    function frash() {
        myChart.showLoading({text: '正在努力的读取数据中...'  });
        // 调用后台获取json数据
            $.ajax({
                url:"/static/Knifelist",
                dataType:"json",
                success:function(jsonData){
                    myChart.setOption({
                        xAxis: {
                            fileNames: jsonData.fileAbsolutePaths
                        },
                        series: [{
                            // 根据名字对应到相应的系列
                            name: '总伤害',
                            fileNames: jsonData.fileNames
                        }]
                    });
                    // 设置加载等待隐藏
                    console.log(jsonData)
                    myChart.hideLoading();
                }
            });

    }

    function select(){
        myChart.showLoading({text: '正在努力的读取数据中...'  });

        var xhr=new XMLHttpRequest();
        xhr.open('get',"/static/normal?time="+document.getElementById("date").value);
        xhr.dataType="json";
        xhr.send();
        xhr.onload=function (){
            var jsonData=  JSON.parse(xhr.responseText);
            console.log(jsonData.allKnifecount);console.log(jsonData.hurtSum);console.log(jsonData.kingcount);
            document.getElementById("outsum").text=jsonData.allKnifecount;
            document.getElementById("hurtsum").text=jsonData.hurtSum;
            document.getElementById("kingsum").text=jsonData.kingcount;
        }


        var xhr1=new XMLHttpRequest();
        xhr1.open('get',"/static/Knifelist?time="+document.getElementById("date").value);
        xhr1.dataType="json";
        xhr1.send();
        xhr1.onload=function (){
            var jsonData=  JSON.parse(xhr1.responseText);
            console.log(jsonData)
            myChart.setOption({
                xAxis: {
                    fileNames: jsonData.categories
                },
                series: [{
                    // 根据名字对应到相应的系列
                    name: '总伤害',
                    fileNames: jsonData.data
                }]
            });
            // 设置加载等待隐藏
            myChart.hideLoading();
        }

    }



    //设置日期选择框
    layui.use('laydate', function() {
        var laydate = layui.laydate;
        laydate.render({
            elem: '#date', //指定元素
            type: 'date', //指定元素
            max: 0,
            format: "y:MM:dd",
            value:new Date(),
            done: function(value, date, endDate){
                select();
            }
        });
    });

    window.onload=frash;//加载数据
</script>
</body>
</html>